<template>
  <div class="profile-info">
    <profile-info-nav-bar />
    <profile-info-main @handleFileUpload="handleFileUpload" />
    <router-view />
  </div>
</template>

<script>
import ProfileInfoNavBar from "./childComps/ProfileInfoNavBar";
import ProfileInfoMain from "./childComps/ProfileInfoMain";

import { getAvatar } from "network/profile";

import { EDIT_IMG_PATH } from "store/mutations.type";

export default {
  methods: {
    handleFileUpload(files) {
      // formdata可以用于对文件进行上传
      let formData = new FormData();
      formData.append("file", files[0]);
      getAvatar(localStorage.getItem("user_id"), formData).then((res) => {
        if (res) {
          res.status === 1
            ? this.$store.commit(EDIT_IMG_PATH, res.image_path)
            : this.$toast.handleTipsText("上传图片失败");
          return;
        }
        this.$toast.handleTipsText("上传图片失败");
      });
    },
  },
  components: {
    ProfileInfoNavBar,
    ProfileInfoMain,
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.profile-info {
  background-color: #f2f2f2;
  z-index: 1;
  .initial-children();
}
</style>